<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>资源预览</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="../css/app.css" />
		<link rel="stylesheet" href="../css/mooc.css">
	</head>
	<body>
		<style>
		    .headbar1{position:relative;}
		    .headbar{
                 background-color: #ffffff;
            }
            .mui-content{
            	height:100%;
            }
            .mui-slider-indicator{
            	background-color: white;
            }
            .mui-title{
            	color:#333333;
            }
			.mui-control-content {
			}
			.mui-slider .mui-segmented-control.mui-segmented-control-inverted ~ .mui-slider-group .mui-slider-item
            {
               border-bottom: 0px solid #c8c7cc;
            }
			.mui-control-content .mui-loading {
				margin-top: 20px;
			}
			.mui-scroll-wrapper{
				margin-top:0px;
			}
			.mui-content-view{
				height:200px;
				overflow: hidden;
				background-color:#FFFAFA;
			}
			#viewtip{
				text-align:center;
				padding-top:80px;
				background-color:#EDEDED;
				height:100%;
				background-color:#00121e;
				background-image:url(../images/videodefault.png);
				background-repeat:no-repeat;background-position: 50% center;
				background-size:100% 100%; 
			}
			#viewtip1{
				text-align:center;
				padding-top:80px;
				background-color:#EDEDED;
				height:100%;
				background-color:#00121e;
				background-image:url(../images/emptydefault.png);
				background-repeat:no-repeat;background-position: 50% center;
				background-size:100% 100%; 
			}
			#viewtip1 .c1{color:white;}
			#viewtip1 .c2{
				margin:40px 30% 0px 30%;
				padding: 3px 15px 3px 15px;
			    border: 1px solid #ffba7e;
			    border-radius: 3px;
			    color: #ffba7e; 
			    font-size: 14px;
			}
			.mui-bar.mui-bar-nav .mui-icon.mui-icon-compose{
				padding-left:0px;
		}
			.mui-bar.mui-bar-nav .mui-icon.mui-icon-help{
				margin-right:20px;
			}
			.mui-icon-left-nav{
				color:#333333;
			}
			.mui-icon-compose{
				color:#333333;
			}
			.mui-icon-help{
				color:#333333;
			}
			#catalogs-div > :first-child.catalog-div{margin-top:10px;}
			#catalogs-div > .catalog-div{margin-bottom:10px;}
		    .catalog-name{background-color: white;height:48px;}
		    .catalog-name p{position:absolute;left:20px;margin-top:15px;color: black;font-size:17px;}
		    .catalog-ress{background-color: white;margin-top:1px;padding:1px 5px 15px 1px;}
		    .res-div{height:38px; border-bottom: 1px solid #f8f8f8;}
		    .res-div.cur{background: #cacac8;}
		    .restype-div{float:left;width:60px;text-align:center;color:#fff;font-size:13px;padding:2px 0px 2px 0px;margin-left:20px;margin-top:7px;}
		    .restype-div.sp{background:#4cc8e7;}
		    .restype-div.jy{background:#ff9d34;}
		    .restype-div.xt{background:#ff9d34;}
		    .restype-div.st{background:#a5b9eb;}
		    .restype-div.stjc{background:#799aed;}
		    .restype-div.tp{background:#95c85d;}
		    .restype-div.kj{background:#ff8873;}
		    .resname-div{float:left;margin-left:20px;margin-top:7px;}
		    .res-div .download-div{float:right;margin-right:20px;margin-top:7px;}
		    .download-div{width:50px;height:25px;padding-left:8px;}
		   /** .download-div .status0{
		    	border: 2px solid #ffb36e;
		    	border-radius:6px;
		    	color:#ffb36e;
		    	width:50px;
		    	height:25px;
		    	padding-left:8px;
		    }**/
		    .download-div .status0{
		    	background: url(../images/download_1.png) no-repeat center;
		    	background-size:25px 20px;
		    	color:#ffb36e;
		    	width:50px;
		    	height:25px;
		    	padding-left:8px;
		    }
		    .download-div .status1{
		    	background: url(../images/download_2.png) no-repeat center;
		    	background-size:25px 25px;
		    	color:#ffb36e;
		    	width:50px;
		    	height:25px;
		    	padding-left:8px;
		    }
		    .download-div .status2{
		    	color:#b7b7b7;
		    }
		     .download-div .status3{
		    	border: 2px solid #ffb36e;
		    	border-radius:6px;
		    	color:#ffb36e;
		    	width:50px;
		    	height:25px;
		    	padding-left:8px;
		    }
		    /**note css***/
		    #coursenotes-div > :first-child.coursenote-div{margin-top:10px;}
		    #coursenotes-div > .coursenote-div{margin-bottom:10px;}
		    .notes{background-color: white;margin-top:1px;padding-bottom:20px;padding-right:8px;;}
		    .note{padding-top:10px;padding-bottom:8px;border-bottom: 1px solid #f8f8f8;word-break: break-all; word-wrap:break-word;}
		    .note .date{position: relative;float:right;margin-top:7px;margin-right:0px;}
		    .note .zan{
		    	float:right;
		    	color:#ffb36e;
		    	height:25px;
		    	margin-top:3px;
		    	padding-left:8px;
		    }
		    .zaned{
		    	width:50px;
		     background: url(../images/jing.png) no-repeat center;	
		    }
		    .note .c1{height:40px;}
		    .note .c2{min-height:25px;padding-left:20px;padding-top:3px;padding-right:5px;white-space: normal}
		    .nonotetip{background-color:white1;height:100px;text-align:center;font-size: 17px;padding-top:50px;margin-top:10px;}
		    /**ques css**/
		   .resquess-div .question{margin-top:8px;word-break: break-all; word-wrap:break-word;}
		   .resquess-div .ques-catalogname{margin-top:10px;margin-bottom:1px;}
		   .resquess-div .ques-restype .c1{background-color: white;height:40px;margin-bottom:8px;}
		   .question .ques-content{background-color:white;padding-bottom: 10px;}
		   .ques-content .ques-title{font-size:16px;margin-top:2px;padding-top:12px;padding-left:10px;}
		   .ques-title .ck{float:left;width:2px;margin-top:1px;height:15px;margin-left:20px;background-color:#3ac9af;}
		   .ques-title .cc{margin-left:11px;white-space: normal;}
		   .ques-title .yd{
		   	    float:right;margin-top:-13px;margin-right:17px;font-size:10px;border: 1px solid #ffb36e;border-top: 0px;
		    	border-radius:0px 0px 4px 4px;
		    	color:#ffb36e;
		    	width:47px;
		    	height:20px;
		    	padding-left:3px;
		    	padding-bottom:4px;
		    	text-align:center;
		    	display:none;
		    	}
		   .ques-content .ques-elseinfo{padding-top:9px;padding-left:32px;height:40px;color:#7b7b7b;}
		   .ques-elseinfo .answerbtn{float:right;background-color:#3ac9af;padding:4px 11px 4px 11px;font-size:16px;margin-right:15px;color:white;border-radius:3px;}
		   .childanswerbtn{float:right;background-color:#d2c371;padding:1px 5px 1px 5px;font-size:11px;margin-right:5px;color:white;border-radius:3px;}
		   .ques-elseinfo .quesuser{margin-left:12px;margin-right:50px;}
		   .question .ques-answers{margin-top:2px;}
		   .answer{padding:10px 17px 10px 17px;;background:white;white-space:normal;border-bottom: 1px solid #f8f8f8;}
		   .answer .answeruser{height:30px;color:#7b7b7b;}
		   .answeruser .date{margin-left:25px;}
		   .answer-content .hfr{color:#7b7b7b;margin-right:10px;}
           .noquestip{background-color:white1;height:100px;text-align:center;font-size: 17px;padding-top:50px;margin-top:10px;}
           /**提问输入框**/
           .putques-div{
           	position: fixed;
           	margin:30px 10% 10px 10%;
           	width:80%;
           	height:252px;
           	background-color: #f7f9fc;
           	z-index: 1000;
           	border: 1px solid #e0e2e5;
           	border-radius:15px;
           	display: none;
           }
          .putques-div .textdiv{
          	height:195px;
          	border-radius:15px 15px 0px 0px;
          	background-color:#f7f9fc;
          }
          .textdiv textarea{
          	background-color:#f7f9fc;
          	border:none;
          	border-radius:15px 15px 0px 0px;
          	font-size:13px; 
          	color:#3D4145;
          }
          .putques-div .btndiv{
          	width:100%;
          	height:55px;
          	border-radius:0px 0px 15px 15px;
          	background-color:#ffffff;
          	text-align: center1;
          	padding-top:18px;
          	border-top: 1px solid #eaecee;
          }
          .btndiv .submitques{
          	text-align: center;
          	 display:inline-block;
          	width:50%;
          	font-size: 19px;
          	margin-top:1px;
          	color: #3ac9af;
          }
          .btndiv .cancelques{
          	text-align: center;
          	 display:inline-block;
          	width:50%;
          	font-size: 19px;
          	margin-top:1px;
          	color: #3ac9af;
          }

		</style>
		<form>
			<input type="hidden" id="fCourseid" value="">
			<input type="hidden" id="fCatalogid" value="">
			<input type="hidden" id="fCatalogname" value="">	
			<input type="hidden" id="fResid" value="">
		    <input type="hidden" id="fResname" value="">
			<input type="hidden" id="fRescatname" value="">
		    <input type="hidden" id="fRescatid" value="">
		    <input type="hidden" id="fParentid" value="">
		    <input type="hidden" id="fCatclass" value="">
		</form>
		<header class="mui-bar mui-bar-nav headbar">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a><a id="opennoteview" class="opennoteview mui-icon mui-icon-compose mui-pull-right"></a><a id="openputques" class="openputques mui-icon mui-icon-help mui-pull-right" style="display: none;"></a>
			<h1 class="mui-title">课程学习</h1>
		</header>
		<div class="mui-content">
			<!--提问框start-->
			<div class="putques-div" id="putques-div">
				<div class="textdiv"><textarea id="questextarea" rows="8" placeholder="请输入您的问题..."></textarea></div>
				<div class="btndiv"><span class="submitques">提交</span><span class="cancelques">取消</span></div>
			</div>
			<!--提问框end-->
			<!--播放框start-->
			<div class="mui-content-view" id="viewres">
               <div id="viewtip"></div>
			</div>
			<!--播放框end-->
			
			<!-- 切换列表start -->
			<div id="slider" class="mui-slider">
				<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<a class="mui-control-item  mui-active" href="#item1mobile">学习资源</a>
					<a class="mui-control-item" href="#item2mobile">查看笔记</a>
					<!--<a class="mui-control-item" href="#item3mobile">提问列表</a>-->
				</div>
				<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-6"></div>
				<div class="mui-slider-group">
					<!--学习资源start -->
					<div id="item1mobile" class="mui-slider-item mui-control-content mui-scroll-wrapper mui-active">
							<div class="mui-scroll" id="catalogs-div">
								<!--example start-->
								<!--<div class="catalog-div">
									<div class="catalog-name"><p>机械设计基础</p></div>
									<div class="catalog-ress">
										<div class="res-div">
											<span class="restype-div sp">视频</span><span class="resname-div">镂空字体</span><span class="download-div"><p class="status0">缓存</p></span> 
										</div>
										<div class="res-div">
											<span class="restype-div sp">视频</span><span class="resname-div">镂空字体</span><span class="download-div"><p class="status1"></p></span> 
										</div>
										<div class="res-div">
											<span class="restype-div sp">视频</span><span class="resname-div">镂空字体</span><span class="download-div"><p class="status2">已缓存</p></span> 
										</div>
									</div>
								</div>-->
								<!--example end-->
							</div>
					</div>
					<!--学习资源end -->
					<!--查看笔记start -->
					<div id="item2mobile" class="mui-slider-item mui-control-content mui-scroll-wrapper">
							<div class="mui-scroll" id="coursenotes-div">
								<div class="nonotetip">没有选择资源或该资源还未记录笔记</div>
								<!--example start-->
								<!--<div class="coursenote-div">
									<div class="catalog-name"><p>机械设计基础1</p></div>
									<div class="notes">
										<div class="note">
											<div class="c1"><span class="restype-div sp">视频</span><span class="resname-div">镂空字体</span><span class="zan zaned"></span><span class="date">2015-11-11</span></div> 
											<div class="c2">我是一名大一学生，这个资源让我受益匪浅.我是一名大一学生，这个资源让我受益匪浅.我是一名大一学生，这个资源让我受益匪浅.我是一名大一学生，这个资源让我受益匪浅.我是一名大一学生，这个资源让我受益匪浅.</div>
										</div>
										<div class="note">
											<div class="c1"><span class="restype-div sp">视频</span><span class="resname-div">镂空字体</span><span class="zan zaned"></span><span class="date">2015-11-11</span></div> 
											<div class="c2">我是一名大二学生，这个资源让我受益匪浅.</div>
										</div>
									</div>
								</div>-->
								<!--example end-->
							</div>
					</div>
					<!--查看笔记end -->
					<!--提问列表start -->
					<div id="item3mobile" class="mui-slider-item mui-control-content mui-scroll-wrapper">
							<div class="mui-scroll resquess-div" id="resquess-div">
										<!--example start-->
										<div id="quescataloginfo"><!--
										<div class="ques-catalogname"><div class="catalog-name"><p>机械设计基础1</p></div></div>
										<div class="ques-restype"><div class="c1"><span class="restype-div sp">视频</span><span class="resname-div">镂空字体</span></div></div>
										--></div>
								   <div class="questions" id="questions">
								     	<div class="noquestip">没有选择资源或该资源还没有提问</div>
								     	<!--
										<div class="question">
									 	     <div class="ques-content">
											     <div class="ques-title"><span class="ck">&nbsp;</span><span class="cc">这个讲的是什么?</span><span class="yd">老师已答</span></div>
                                                 <div class="ques-elseinfo"><span>机械设计（1）班</span><span class="quesuser">李建</span><span>同问</span><span>(3)</span><span class="answerbtn">回复</span></div>
										     </div>
										     <div class="ques-answers">
										     	<div class="answer">
										     		<div class="answeruser"><span>王倩(老师)</span><span class="date">2015-12-12</span></div>
										     		<div class="answer-content"><span class="hfc">这个视频从机械原理讲起，真正让学院抛开书籍轻松快乐的学习，本资源通俗易懂，让你更高效的学习。</span></div>
										     	</div>
										     	<div class="answer">
										     		<div class="answeruser"><span>王倩(老师)</span><span class="date">2015-12-12</span></div>
										     		<div class="answer-content"><span class="hfr">回复&nbsp;王倩:</span><span class="hfc">这个视频从机械原理讲起，真正让学院抛开书籍轻松快乐的学习，本资源通俗易懂，让你更高效的学习。</span></div>
										     	</div>
										     </div>
										</div>-->
									</div>
										<!--example end-->
							</div>
					</div>
					<!--提问列表end -->
				</div>
			</div>
			<!--切换列表end-->
		</div>
		<script src="../js/mui.min.js"></script>
		 <script src="../script/config.js"></script>
		 <script src="../js/zepto.min.js" ></script>
		 <script src="../js/DMobileFrame_DownLoadUtil.js" ></script>
		 <script src="../script/moocpublic.js"></script>
		 <script src="../js/fastclick.js"></script>
		<script src="script/resview.js"></script>
		<script src="script/resnote.js"></script> 
		<script>
			(function($) {
				$('.mui-scroll-wrapper').scroll({
					indicators: false //是否显示滚动条
				});
			})(mui);
		</script>
	</body>
</html>